// 创建场景
var scene = new THREE.Scene()

// 创建照相机 参数 距离, 宽高比,相机视锥体的近平面,相机视锥体的远平面
var camera = new THREE.PerspectiveCamera(
  80,
  window.innerWidth / window.innerHeight,
  0.8,
  600
)

camera.position.x = -30
camera.position.y = 40
camera.position.z = 30
camera.lookAt(scene.position)

// 渲染器
var renderer = new THREE.WebGLRenderer()

// 设置渲染器颜色
renderer.setClearColor(new THREE.Color(0xeeeeee))
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight)

// 显示坐标轴
var axes = new THREE.AxisHelper(20)
scene.add(axes)

// 设置平面大小
var planeGeometry = new THREE.PlaneGeometry(20, 20)
// 设置平面颜色
var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xccffff })
var plane = new THREE.Mesh(planeGeometry, planeMaterial)

plane.rotation.x = -0.5 * Math.PI

plane.position.x = 15
plane.position.y = 0
plane.position.z = 0

scene.add(plane)

// cub 立方体
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4)
var cubeMaterial = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  // 3d线性显示
  wireframe: true,
})
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)

cube.position.x = -4
cube.position.y = 3
cube.position.z = 0

scene.add(cube)

var sphereGeometry = new THREE.SphereGeometry(4, 20, 20)
var sphereMaterial = new THREE.MeshBasicMaterial({
  color: 0x7777ff,
  wireframe: true,
})
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)

sphere.position.x = 0
sphere.position.y = 4
sphere.position.z = 20

scene.add(sphere)

document.getElementById('main').appendChild(renderer.domElement)
renderer.render(scene, camera)
